<!--vue模板-->
<template>
  <!--询价产品-->

  <div class="detail">询价产品</div>
  <el-table
    :data="enquiryProduct"
    style="width: 100%"
    stripe
    border
    @selection-change="chg"
    @cell-click="cellck"
  >
    <el-table-column
      type="index"
      label="序号"
      width="80"
      header-align="center"
      align="center"
    />

    <el-table-column
      label="产品名称"
      prop="productName"
      width="180"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input
          v-if="row.active && row.active.productName"
          size="small"
          v-model="row.productName"
          v-focus
        >
          <template #suffix>
            <el-icon
              class="el-input__icon"
              @click="tosearch(row.index)"
              style="cursor: pointer"
              ><search
            /></el-icon>
          </template>
        </el-input>
        <span v-else>{{ row.productName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="产品编号"
      prop="productCode"
      width="160"
      header-align="center"
    />
    <el-table-column
      label="规格型号"
      prop="specification"
      width="180"
      header-align="center"
    />
    <el-table-column
      label="单位"
      prop="unit"
      width="80"
      header-align="center"
    />
    <el-table-column
      label="供应商"
      prop="supplier"
      width="180"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input
          v-if="row.active && row.active.supplier"
          v-model="row.supplier"
        ></el-input>
        <span v-else>{{ row.supplier }}</span>
      </template>
    </el-table-column>
    <el-table-column label="数量" prop="num" width="140" header-align="center">
      <template v-slot="{ row, column, $index }">
        <el-input-number
          style="width: 110px"
          :min="0"
          size="small"
          v-if="row.active && row.active.num"
          v-model="row.num"
        ></el-input-number>
        <span v-else>{{ row.num }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="单价"
      prop="price"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input-number
          style="width: 110px"
          size="small"
          :min="0"
          :precision="2"
          v-if="row.active && row.active.price"
          v-model="row.price"
        ></el-input-number>
        <span v-else>{{ row.price }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="税率(%)"
      prop="price"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input-number
          style="width: 110px"
          size="small"
          :min="0"
          :precision="2"
          v-if="row.active && row.active.price"
          v-model="row.price"
        ></el-input-number>
        <span v-else>{{ row.price }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="票据类型"
      prop="price"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input-number
          style="width: 110px"
          size="small"
          :min="0"
          :precision="2"
          v-if="row.active && row.active.price"
          v-model="row.price"
        ></el-input-number>
        <span v-else>{{ row.price }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="折扣"
      prop="price"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input-number
          style="width: 110px"
          size="small"
          :min="0"
          :precision="2"
          v-if="row.active && row.active.price"
          v-model="row.price"
        ></el-input-number>
        <span v-else>{{ row.price }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="未税折后单价"
      prop="total"
      :min="0"
      width="140"
      header-align="center"
    />

    <el-table-column
      label="含税单价"
      prop="total"
      :min="0"
      width="140"
      header-align="center"
    />

    <el-table-column
      label="含税折后单价"
      prop="total"
      :min="0"
      width="140"
      header-align="center"
    />

    <el-table-column
      label="未税金额"
      prop="total"
      :min="0"
      width="140"
      header-align="center"
    />

    <el-table-column
      label="税额"
      prop="total"
      :min="0"
      width="140"
      header-align="center"
    />

    <el-table-column
      label="总金额"
      prop="total"
      :min="0"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-input-number
          :precision="2"
          style="width: 110px"
          size="small"
          v-if="row.active && row.active.total"
          v-model="row.total"
        ></el-input-number>
        <span v-else>{{ row.total }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="交货日期"
      prop="needDate"
      width="140"
      header-align="center"
    >
      <template v-slot="{ row, column, $index }">
        <el-date-picker
          v-if="row.active && row.active.needDate"
          v-model="row.needDate"
          style="width: 110px"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder=""
          size="small"
        />
        <span v-else>{{ row.needDate }}</span>
      </template>
    </el-table-column>
    <el-table-column label="备注" prop="note" header-align="center" width="200">
      <template v-slot="{ row, column, $index }">
        <el-input
          v-if="row.active && row.active.note"
          v-model="row.note"
        ></el-input>
        <span v-else>{{ row.note }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<!--vue 组件选项定义-->
<script>
export default {
  data() {
    return {
      enquiryProduct: [],
    };
  },
  emits:["updateProduct"],
  watch:{
    enquiryProduct:{
      handler:function(val){
        if(val.length>0)
         this.$emit("updateProduct",val[0]);
      },
     deep:true
    }
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  created(){
    this.query();
  },
  methods:{
      query(){
        //先清空
        this.enquiryProduct=[];
        this.$http.get("/api/enquiry/product",{id:this.id})
        .then(res=>{
            if(res.code==200){
                //将产品加入表格
                this.enquiryProduct.push(res.result);
                console.log(">>>>",this.enquiryProduct);
            }
        })
      }
  }
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.detail {
  height: 40px;
  line-height: 40px;
  border: #c0ccdd solid 1px;
  background-color: #f9fcff;
  margin-top: 20px;
  padding-left: 10px;
  border-bottom-style: none;
}
</style>
